<template>
  <div class="personal-center w">
    <a-affix :offset-top="138" style="height: 200px">
      <div ref="filterRef" class="list-fixed">
        <div class="anchor-box my-scrollbar">
          <div class="screen">
            <div class="screen-box">
              <div
                v-for="item in anchorList"
                :key="item.key"
                class="cursor-pointer screen-item elliptical-1"
                :title="item.title"
                :class="{ 'item-checked': selectedItem === item.key }"
                @click="selectItem(item)"
              >
                {{ item.title }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-affix>

    <div class="main-wrap">
      <template v-if="selectedItem === 'basic-information'">
        <div class="personal-center-main">
          <div class="head-info">
            <div class="head">{{ userInfoStore.userNameLastTwo }}</div>
          </div>
          <ul style="width: 460px">
            <personal-card title="用户名称" :desc="personalInfo.username" fun :auth="''" @cardBtn="updateName" />
            <personal-card title="手机号" :desc="personalInfo.tel" fun note="登录账号" @cardBtn="updatePhone" />
            <personal-card
              title="邮箱"
              :desc="personalInfo.email || '未绑定'"
              fun
              note=""
              :style="{ marginBottom: 0 }"
              @cardBtn="updateEmail"
            />
            <div class="line"></div>
            <personal-card title="密码" :desc="personalInfo.password || '********'" fun @cardBtn="updatePWS" />
            <div class="line"></div>
            <personal-card title="角色" :desc="personalInfo.roleNames" />
            <personal-card title="状态" :desc="personalInfo.status" />
          </ul>
        </div>
      </template>
      <!-- 我的收藏 -->
      <template v-else-if="selectedItem === 'collect'">
        <my-collections />
      </template>
      <!-- 我的活动 -->
      <template v-else-if="selectedItem === 'activity'">
        <my-activity />
      </template>
    </div>

    <!-- 修改名称 -->
    <a-modal
      v-model:open="visibleState.updataNameVisible"
      centered
      width="416px"
      title="修改用户名称"
      ok-text="确定"
      cancel-text="取消"
      :ok-button-props="{
        loading: updataNameLoading
      }"
      @ok="nameHandleOk"
    >
      <div class="modal-main">
        <a-form ref="updataNameRef" :model="updataNameFrom" :rules="updataNameRules">
          <a-form-item name="username">
            <div class="name">用户名称</div>
            <a-input v-model:value="updataNameFrom.username" v-trim placeholder="请输入用户名称" :maxlength="20" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <!-- 修改手机号 -->
    <a-modal
      v-model:open="visibleState.updataPhoneVisibleOne"
      centered
      width="416px"
      title="验证旧手机号"
      ok-text="下一步"
      cancel-text="取消"
      @ok="PhoneOneHandleOk"
    >
      <div class="modal-main">
        <a-form ref="updataPhoneOneRef" :model="updataPhoneOneForm" :rules="updataPhoneOneRules">
          <a-form-item name="tel">
            <a-input
              v-model:value="updataPhoneOneForm.tel"
              class="tel-input"
              addon-before="+86"
              :maxlength="11"
              placeholder="请输入手机号"
              :disabled="true"
            />
          </a-form-item>
          <a-form-item name="code">
            <div class="auth-code-wrapper">
              <a-input v-model:value="updataPhoneOneForm.code" v-trim :maxlength="8" placeholder="请输入验证码" />
              <a-button :disabled="onePhoneTime ? true : false" @click="sencodePhoneone">
                <div class="btn-code">{{ onePhoneTime ? onePhoneTime + 's' : '获取验证码' }}</div>
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal
      v-model:open="visibleState.updataPhoneVisibleTwo"
      centered
      width="416px"
      title="换绑新手机号"
      ok-text="确定"
      cancel-text="取消"
      :ok-button-props="{
        loading: updataPhoneLoading
      }"
      @ok="PhoneTwoHandleOk"
    >
      <div class="modal-main">
        <a-form ref="updataPhoneTwoRef" :model="updataPhoneTwoForm" :rules="updataPhoneTwoRules">
          <a-form-item name="tel">
            <a-input
              v-model:value="updataPhoneTwoForm.tel"
              v-trim
              class="tel-input"
              addon-before="+86"
              :maxlength="11"
              placeholder="请输入手机号"
            />
          </a-form-item>
          <a-form-item name="code">
            <div class="auth-code-wrapper">
              <a-input v-model:value="updataPhoneTwoForm.code" v-trim :maxlength="8" placeholder="请输入验证码" />
              <a-button :disabled="twoPhoneTime ? true : false" @click="sencodePhonetwo">
                <div class="btn-code">{{ twoPhoneTime ? twoPhoneTime + 's' : '获取验证码' }}</div>
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>
      <div class="modal-main"></div>
    </a-modal>
    <!-- 绑定邮箱 -->
    <a-modal
      v-model:open="visibleState.updataEmailVisibleOne"
      centered
      width="416px"
      title="换绑邮箱-手机号验证"
      ok-text="下一步"
      :ok-button-props="{
        loading: checkEmailLoading
      }"
      @ok="EmailOneHandleOk"
    >
      <div class="modal-main">
        <a-form ref="updataEmailOneRef" :model="updataEmailOneForm" :rules="updataEmailOneRules">
          <a-form-item name="tel">
            <a-input
              v-model:value="updataEmailOneForm.tel"
              class="tel-input"
              addon-before="+86"
              :maxlength="11"
              placeholder="请输入手机号"
              :disabled="true"
            />
          </a-form-item>
          <a-form-item name="code">
            <div class="auth-code-wrapper">
              <a-input v-model:value="updataEmailOneForm.code" v-trim :maxlength="8" placeholder="请输入验证码" />
              <a-button :disabled="oneEmailTime ? true : false" @click="sencodeEmailone">
                <div class="btn-code">{{ oneEmailTime ? oneEmailTime + 's' : '获取验证码' }}</div>
              </a-button>
            </div>
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal
      v-model:open="visibleState.updataEmailVisibleTwo"
      centered
      width="416px"
      title="换绑邮箱"
      ok-text="确定"
      cancel-text="取消"
      :ok-button-props="{
        loading: sendMailLoading
      }"
      @ok="EmailTwoHandleOk"
    >
      <div class="modal-main">
        <a-form ref="updataEmailTwoRef" :model="updataEmailTwoForm" :rules="updataEmailTwoRules">
          <a-form-item name="email">
            <div class="name">新邮箱地址</div>
            <a-input v-model:value="updataEmailTwoForm.email" v-trim :maxlength="100" placeholder="请输入邮箱地址" class="mh-36" />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
    <a-modal
      v-model:open="visibleState.updataEmailVisibleThree"
      centered
      width="416px"
      title="换绑邮箱"
      ok-text="知道了"
      @ok="EmailThreeHandleOk"
    >
      <div class="dilog-box">
        <div class="name">验证链接已发送至您的邮箱,5分钟内有效,请前往验证</div>
      </div>
    </a-modal>
    <!-- 修改密码 -->
    <a-modal
      v-model:open="visibleState.updataPWSVisible"
      centered
      width="416px"
      title="修改密码"
      ok-text="确定"
      cancel-text="取消"
      :ok-button-props="{
        loading: updatePwsLoading
      }"
      @cancel="resetPWSRef"
      @ok="PWSHandleOk"
    >
      <div class="modal-main">
        <a-form ref="updataPWSRef" :model="updataPWSForm" :rules="updataPWSRules">
          <a-form-item name="oldPassword">
            <div class="name">原密码</div>
            <a-input-password
              v-model:value="updataPWSForm.oldPassword"
              autocomplete="off"
              placeholder="请输入原密码"
              :maxlength="15"
              @input="updataPWSForm.oldPassword = updataPWSForm.oldPassword.replace(/\s+/g, '')"
            />
          </a-form-item>
          <a-form-item name="newPassWord">
            <div class="name">新密码</div>
            <a-input-password
              v-model:value="updataPWSForm.newPassWord"
              autocomplete="off"
              placeholder="请输入新密码"
              :maxlength="15"
              @input="updataPWSForm.newPassWord = updataPWSForm.newPassWord.replace(/\s+/g, '')"
            />
          </a-form-item>
          <a-form-item name="confirmPassWord">
            <div class="name">确认密码</div>
            <a-input-password
              v-model:value="updataPWSForm.confirmPassWord"
              autocomplete="off"
              placeholder="请输入确认密码"
              :maxlength="15"
              @input="updataPWSForm.confirmPassWord = updataPWSForm.confirmPassWord.replace(/\s+/g, '')"
            />
          </a-form-item>
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
  import { FormInstance, message } from 'ant-design-vue'
  import { Rule } from 'ant-design-vue/es/form'
  import { cloneDeep, regex, useCountDown, useSM4 } from 'g6-fn'
  import { onMounted, reactive, ref } from 'vue'
  import { useRequest } from 'vue-request'
  import { useRoute } from 'vue-router'

  import { SM4_KEY } from '@/config'
  import { loginApi, personalApi } from '@/services/api'
  import { useUserInfoStore } from '@/store'

  import PersonalCard from '../components/PersonalCard.vue'
  import MyActivity from '../my-activity/index.vue'
  import MyCollections from '../my-collections/index.vue'
  import { PersonalDataResponse } from '../types'

  const anchorList = [
    {
      key: 'basic-information',
      href: '#anchor-basic-information',
      title: '基本信息'
    },
    {
      key: 'collect',
      href: '#anchor-collect',
      title: '我的收藏'
    },
    {
      key: 'activity',
      href: '#anchor-activity',
      title: '我的活动'
    }
  ]

  const route = useRoute()
  const userInfoStore = useUserInfoStore()
  const visibleState = reactive({
    updataNameVisible: false,
    updataPhoneVisibleOne: false,
    updataPhoneVisibleTwo: false,
    updataEmailVisibleOne: false,
    updataEmailVisibleTwo: false,
    updataEmailVisibleThree: false,
    updataPWSVisible: false
  })

  const selectedItem = ref<number | string>((route.query.parentTab as string) || anchorList[0].key)

  const selectItem = (item: any) => {
    selectedItem.value = item.key
    // 滚动到顶部
    document.documentElement.scrollTop = 0
  }

  /**
   * 用户信息
   */
  let personalInfo = reactive({
    username: '',
    tel: '',
    email: '',
    password: '',
    roleNames: '测试',
    status: '可用',
    imgurl: ''
  })

  //获取用户信息
  const { runAsync: getPersonalData } = useRequest<ResponseData<PersonalDataResponse>>(personalApi.userToken, {
    onSuccess: ({ data }) => {
      Object.assign(personalInfo, data)
      const newUserInfo = {
        tel: data.tel,
        username: data.username
      }
      userInfoStore.changeUserInfo(Object.assign(userInfoStore.userInfo, newUserInfo))
    }
  })
  const query = route.query
  onMounted(async () => {
    getPersonalData()
    if (query && query.openPassword) {
      visibleState.updataPWSVisible = true
    }
  })

  /**
   * 修改名称
   */
  const updataNameFrom = reactive({
    username: ''
  })
  const updataNameRef = ref<FormInstance>()
  // 确认修改名字
  const { loading: updataNameLoading, runAsync: runUpdateName } = useRequest(personalApi.editName, {
    onSuccess: () => {
      message.success('名称修改成功')
      getPersonalData()
      visibleState.updataNameVisible = false
    }
  })
  const nameHandleOk = async () => {
    await updataNameRef.value?.validateFields()
    runUpdateName(updataNameFrom)
  }
  // 修改姓名弹窗打开
  const updateName = () => {
    updataNameRef.value?.resetFields()
    updataNameFrom.username = personalInfo.username
    visibleState.updataNameVisible = true
  }
  //校验名称
  // let validateName = async (rule: Rule, value: string) => {
  //   return PubCheckName(value)
  // }
  const updataNameRules: Record<string, Rule[]> = {
    username: [
      { required: true, message: '请输入用户名称' },
      {
        pattern: regex.numName,
        message: '仅支持中英文、数字'
      }
    ]
  }

  /**
   * 修改手机号
   */
  interface Codetype {
    tel: string
    code: string
    securityCode?: string
    securitySmsCode?: string
  }
  const updataPhoneOneForm = reactive<Codetype>({
    tel: '',
    code: '',
    securityCode: '',
    securitySmsCode: ''
  })
  const updataPhoneTwoForm = reactive<Codetype>({
    tel: '',
    code: '',
    securityCode: ''
  })
  const updataPhoneOneRef = ref<FormInstance>()
  const updataPhoneTwoRef = ref<FormInstance>()
  //修改手机号
  const updatePhone = () => {
    updataPhoneOneRef.value?.resetFields()
    updataPhoneOneForm.tel = personalInfo.tel
    visibleState.updataPhoneVisibleOne = true
  }
  //确认修改手机-1-发送验证码
  const { counter: onePhoneTime, start: onePhoneTimeDown } = useCountDown()
  const { runAsync: sendSmsOne } = useRequest<{ headers: { 'security-code': string } }>(loginApi.sendSms, {
    onSuccess: res => {
      updataPhoneOneForm.securityCode = res.headers['security-code']
      onePhoneTimeDown(60)
      message.success('短信验证码发送成功')
    }
  })
  const sencodePhoneone = () => {
    let params = {
      tel: updataPhoneOneForm.tel,
      messageType: 4
    }
    sendSmsOne(params)
  }
  // 确认修改手机-1
  const PhoneOneHandleOk = async () => {
    await updataPhoneOneRef.value?.validateFields()
    const res = await personalApi.checkTel(updataPhoneOneForm)

    updataPhoneOneForm.securitySmsCode = res.headers['security-sms-code']
    visibleState.updataPhoneVisibleOne = false
    updataPhoneOneRef.value?.resetFields()
    updataPhoneTwoRef.value?.resetFields()
    visibleState.updataPhoneVisibleTwo = true
  }
  //确认修改手机-2-发送验证码
  const { counter: twoPhoneTime, start: twoPhoneTimeDown } = useCountDown()
  const { runAsync: sendSmsTwo } = useRequest<{ headers: { 'security-code': string } }>(loginApi.sendSms, {
    onSuccess: res => {
      updataPhoneTwoForm.securityCode = res.headers['security-code']
      twoPhoneTimeDown(60)
      message.success('短信验证码发送成功')
    }
  })
  const sencodePhonetwo = async () => {
    let params = {
      tel: updataPhoneTwoForm.tel,
      messageType: 5,
      securitySmsCode: updataPhoneOneForm.securitySmsCode
    }
    await updataPhoneTwoRef.value?.validateFields(['tel'])
    sendSmsTwo(params)
  }
  // 确认修改手机-2
  const { loading: updataPhoneLoading, runAsync: runUpdatePhone } = useRequest(personalApi.editTel, {
    onSuccess: () => {
      message.success('手机号修改成功')
      getPersonalData()
      visibleState.updataPhoneVisibleTwo = false
    }
  })
  const PhoneTwoHandleOk = async () => {
    await updataPhoneTwoRef.value?.validateFields()
    updataPhoneTwoForm.securitySmsCode = updataPhoneOneForm.securitySmsCode
    runUpdatePhone(updataPhoneTwoForm)
  }

  const updataPhoneOneRules: Record<string, Rule[]> = {
    tel: [{ required: true, trigger: 'change' }],
    code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
  }
  const updataPhoneTwoRules: Record<string, Rule[]> = {
    tel: [
      { required: true, message: '请输入手机号' },
      {
        pattern: regex.phone,
        message: '请输入正确的手机号'
      }
    ],
    code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
  }

  /**
   * 修改邮箱
   */
  const updataEmailOneForm = reactive<Codetype>({
    tel: '',
    code: '',
    securityCode: '',
    securitySmsCode: ''
  })
  const updataEmailTwoForm = reactive({
    email: ''
  })
  const updataEmailOneRef = ref<FormInstance>()
  const updataEmailTwoRef = ref<FormInstance>()
  // 修改邮箱
  const updateEmail = () => {
    updataEmailOneRef.value?.resetFields()
    updataEmailOneForm.tel = personalInfo.tel
    visibleState.updataEmailVisibleOne = true
  }
  //校验邮箱
  // let validateEmail = async (rule: Rule, value: string) => {
  //   if (value !== personalInfo.email) {
  //     return PubCheckEmail(value)
  //   } else {
  //     return Promise.reject('新邮箱不能与旧邮箱一致')
  //   }
  // }
  const updataEmailOneRules: Record<string, Rule[]> = {
    tel: [{ required: true, trigger: 'change' }],
    code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
  }
  const updataEmailTwoRules: Record<string, Rule[]> = {
    // email: [{ required: true, validator: validateEmail, trigger: 'change' }]
    email: [
      { required: true, message: '请输入邮箱地址' },
      {
        pattern: regex.email,
        message: '请输入正确的邮箱地址'
      }
    ]
  }

  //修改邮箱-1获取验证码
  const { counter: oneEmailTime, start: oneEmailTimeDown } = useCountDown()
  const sencodeEmailone = async () => {
    let params = {
      tel: updataEmailOneForm.tel,
      messageType: 6
    }
    //发送请求
    let res = await loginApi.sendSms(params)
    updataEmailOneForm.securityCode = res.headers['security-code']
    message.success('短信验证码发送成功')
    oneEmailTimeDown(60)
  }
  // 修改邮箱-1
  const { loading: checkEmailLoading, runAsync: runCheckEmail } = useRequest<{ headers: { 'security-sms-code': string } }>(
    personalApi.checkEmail,
    {
      onSuccess: res => {
        updataEmailOneForm.securitySmsCode = res.headers['security-sms-code']
        visibleState.updataEmailVisibleOne = false
        visibleState.updataEmailVisibleTwo = true
      }
    }
  )
  const EmailOneHandleOk = async () => {
    await updataEmailOneRef.value?.validateFields()
    runCheckEmail(updataEmailOneForm)
  }
  // 修改邮箱-2
  const { loading: sendMailLoading, runAsync: runSendMail } = useRequest(personalApi.sendMail, {
    onSuccess: () => {
      visibleState.updataEmailVisibleTwo = false
      visibleState.updataEmailVisibleThree = true
    }
  })
  const EmailTwoHandleOk = async () => {
    await updataEmailTwoRef.value?.validateFields()
    const params = {
      email: updataEmailTwoForm.email,
      securitySmsCode: updataEmailOneForm.securitySmsCode,
      activateUrl: location.origin + '/updateemail'
    }
    runSendMail(params)
  }
  // 修改邮箱-3
  const EmailThreeHandleOk = () => {
    updataEmailTwoForm.email = ''
    visibleState.updataEmailVisibleThree = false
  }

  /**
   * 修改密码
   */
  const updataPWSForm = reactive<Record<string, string>>({
    oldPassword: '',
    newPassWord: '',
    confirmPassWord: ''
  })
  const updataPWSRef = ref<FormInstance>()
  //密码校验规则
  const passwordVerificaRule = (value: string) => {
    // 检查密码长度
    if (!value) {
      return Promise.reject('请输入密码')
    } else if (value.length < 8 || value.length > 15) {
      return Promise.reject('密码的长度为8-15位')
    }

    // 定义正则表达式，要求包含大、小写字母、数字和特殊字符中的三项
    const regex =
      /^(?:(?=.*[a-z])(?=.*[A-Z])(?=.*\d)|(?=.*[a-z])(?=.*[A-Z])(?=.*[\W_])|(?=.*[a-z])(?=.*\d)(?=.*[\W_])|(?=.*[A-Z])(?=.*\d)(?=.*[\W_]))[^\u4e00-\u9fa5\u3040-\u30FF\uAC00-\uD7AF]+$/

    if (!regex.test(value)) {
      return Promise.reject('密码至少包含大、小写字母、数字和特殊字符中的三项')
    }

    return Promise.resolve()
  }

  //校验原密码
  let validateOldpws = async (rule: Rule, value: string) => {
    if (value === '') {
      return Promise.reject('请输入原密码')
    }
    return Promise.resolve()
    // return passwordVerificaRule(value)
  }
  //校验密码
  let validatePWS = async (rule: Rule, value: string) => {
    if (value === '') {
      return Promise.reject('请输入新密码')
    }
    if (value !== updataPWSForm.oldPassword) {
      return passwordVerificaRule(value)
    }
    return Promise.reject('新密码不能与原密码一致')
  }
  //确认密码
  let validateAckPWS = async (rule: Rule, value: string) => {
    if (value === '') {
      return Promise.reject('请输入确认密码')
    }
    if (value !== updataPWSForm.newPassWord) {
      return Promise.reject('两次输入的新密码不一致')
    }
    return Promise.resolve()
  }

  const updataPWSRules: Record<string, Rule[]> = {
    oldPassword: [{ required: true, validator: validateOldpws, trigger: 'change' }],
    newPassWord: [{ required: true, validator: validatePWS, trigger: 'change' }],
    confirmPassWord: [{ required: true, validator: validateAckPWS, trigger: 'change' }]
  }
  // 修改密码
  const updatePWS = () => {
    visibleState.updataPWSVisible = true
  }
  // 重置修改密码
  const resetPWSRef = async () => {
    await updataPWSRef.value?.resetFields()
  }
  // 确认修改密码
  const { encrypt } = useSM4(SM4_KEY)
  const { loading: updatePwsLoading, runAsync: runEditPass } = useRequest(personalApi.editPass, {
    onSuccess: () => {
      visibleState.updataPWSVisible = false
      message.success('密码修改成功')
    }
  })
  const PWSHandleOk = async () => {
    await updataPWSRef.value?.validateFields()
    const params = cloneDeep(updataPWSForm)
    for (const key in params) {
      params[key] = encrypt(params[key])
    }
    runEditPass(params)
  }
</script>

<style lang="less" scoped>
  @import '@/views/login/styles/index.less';

  .personal-center {
    position: relative;
    display: flex;
    gap: 0 64px;

    .anchor {
      // padding-top: 64px;

      :deep(.ant-anchor-wrapper) {
        &:not(.ant-anchor-wrapper-horizontal) .ant-anchor {
          &::before {
            right: 0;
            left: unset;
          }

          .ant-anchor-link {
            padding-right: 16px;
            padding-left: 0;
            margin: 8px 0;
            font-size: 16px;
            font-weight: 400;

            &.ant-anchor-link-active {
              font-weight: 700;
            }
          }

          .ant-anchor-ink {
            right: 0 !important;
            left: unset !important;
          }
        }
      }
    }

    .main-wrap {
      flex: 1;
    }

    .nav {
      display: flex;
      align-items: center;
      padding: 64px 0 20px;
      width: 100%;
      gap: 0 12px;

      .back {
        width: 30px;
        height: 30px;
        background: @background1;
        border: 1px solid @border2;
        border-radius: 6px;
        box-shadow: 0 2px 0 rgba(0, 0, 0, 0.043);
        cursor: pointer;
        .fc();
      }

      .title {
        margin: 0;
      }
    }

    .personal-center-main {
      padding: 100px 0;
    }

    .title {
      .font20b();

      margin-bottom: 56px;
      color: @text01;
    }

    .head-info {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      margin: 0 80px 40px 0;

      .head {
        .fc();

        margin-bottom: 10px;
        width: 88px;
        height: 88px;
        font-size: 28px;
        color: @background1;
        background-color: @primary1;
        border-radius: 50%;
      }

      .roleNames {
        padding: 3px 6px;
        width: 84px;
        font-size: 12px;
        text-align: center;
        color: #f7ac33;
        border: 1px solid #fcdfb0;
        border-radius: 6px;
        line-height: 20px;
        user-select: none;
        .elliptical-1();
      }

      .status {
        .fc();

        font-size: 12px;
        line-height: 20px;
      }
    }

    .line {
      margin-bottom: 24px;
      width: 100%;
      height: 1px;
      background-color: rgba(232, 232, 235, 1);
    }
  }

  .modal-main {
    .name {
      .font14();

      margin-bottom: 6px;
      color: @text02;
    }
  }

  .list-fixed {
    position: static;
    width: 112px;

    .anchor-box {
      overflow-y: auto;
      margin-top: 22px;
      max-height: 500px;

      .screen {
        position: relative;
        display: flex;
        justify-content: flex-end;
        list-style: none;
        box-sizing: border-box;
        padding-inline-start: 2px;

        .screen-box {
          display: flex;
          min-width: 88px;
          max-width: 215px;
          height: 100%;
          text-align: right;
          flex-direction: column;
          border-right: 1px solid @border1;
          gap: 24px;

          .screen-item {
            padding-right: 24px;
            height: 24px;
            font-size: 16px;
            color: rgba(17, 22, 31, 0.75);
            line-height: 24px; /* 150% */
          }

          .item-checked {
            border-right: 3px solid #649af0;
            color: #1868e9;
            font-weight: 700;
            line-height: 24px; /* 150% */
          }
        }
      }
    }
  }
</style>
